<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>珠峰培训-QQ音乐播放器</title>
    <!-- IMPORT CSS -->
    <link rel="stylesheet" href="css/reset.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="./js/prefixfree.min.js" async></script>
    <!-- 没有依赖 async -->
    <script>
        // 计算rem和px换算比例
        (function () {
            const computed = () => {
                let winw = document.documentElement.clientWidth;
                let ratio = 100;
                if (winw >= 750) {
                    document.documentElement.style.fontSize = '100px';
                    return;

                }
                ratio = winw / (750 / 100);
                document.documentElement.style.fontSize = ratio + 'px'


            }
            computed();
            let event = window.hasOwnProperty('onorientationchange') ? 'onorientationchange' : 'resize';
            // 横竖屏切换事件
            window.addEventListener(event, computed);




        })()
    </script>
</head>

<body>
    <section id="app">
        <!-- 头部 -->
        <header class="header-box">
            <div class="base-info">
                <img src="./images/myDream.jpg" alt="" class="pic">
                <h2 class="title">起风了(旧版)</h2>
                <h3 class="author">买辣椒也用券 </h3>
            </div>
            <a href="javascript:;" class="music-btn"></a>
        </header>


        <!-- 歌词 -->
        <main class="main-box">
            <div class="lyric">
                <div class="wrapper">
                    <p class="active"></p>
                </div>
            </div>


        </main>


        <!-- 尾部 -->
        <footer class="footer-box">
            <div class="progress">
                <span class="already">00.00</span>
                <div class="back">
                    <div class="rate"></div>
                </div>
                <span class="duration">00.00</span>
            </div>
            <a href="#" class="download">下载音乐</a>






        </footer>




        <!-- 背景 -->
        <div class="bg-image"></div>
        <div class="bg-mark"></div>






        <audio src="./images/C400002WpoqG1wDTUa.m4a" id="myAudio" preload="metadata"></audio>






    </section>
    <script src="./js/fastclick.js" defer></script>
    <script src="./js/subscribe.js" defer></script>
    <script src="./js/index.js" defer></script>
    <!-- IMPORT JS -->
</body>

</html>